<template>
    <div class="article-detail-container">
        <div class="markdown-body" style="margin-bottom: 16px">
            <h3>{{detailData.name}}</h3>
            <!--<i class='time-sty'>{{detailData.time}}</i>-->
            <!--<strong> · </strong>-->
            <!--<b>{{detailData.author}}</b><br>-->
        </div>
        <MarkedContent :mdString="detailData.content"></MarkedContent>
    </div>
</template>

<script>
    import MarkedContent from '@/components/MarkedContent'
    import 'github-markdown-css'
    export default {
        name: "GeographyDetail",
        data(){
            return {
                detailData : {}
            }
        },
        components : {
            MarkedContent
        },
        activated(){
            this.getDetailData();
        },
        methods:{
            getDetailData(){
                this.axios.get('/geography/single',{
                    params : {
                        id : this.$route.query.id
                    }
                })
                    .then(res=>{
                        this.detailData = res.data;
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .article-detail-container{
        padding: 24px;
        .time-sty{
            color: #999;
            font-size: 12px;
        }
    }
</style>